/**
 * @Name:  ReactRoute
 * @Author:
 * @Desc:  react-route学习
 * @Date: 2020-12-08 09:31:57
 */
import React, { Component } from "react";
import { BrowserRouter as Router, Switch, Route, useParams, NavLink, StaticRouter } from "react-router-dom";

import styles from "./styles.module.less";

export default class ReactRoute extends Component {
  render() {
    const context = {};
    return (
      <div>
        <h2>react-route学习</h2>
        <h3>获取嵌套路由后缀-useParams</h3>
        <h3>路由动态样式-activeClassName</h3>
        <Router>
          <div>
            <nav>
              <li>
                <NavLink to="/in" activeClassName={styles.active_route}>
                  首页
                </NavLink>
              </li>
              <li>
                <NavLink to="/so" activeClassName={styles.active_route}>
                  排序
                </NavLink>
              </li>
              <li>
                <NavLink to={{ pathname: "/re/:11", state: { key: 11 } }} activeClassName={styles.active_route}>
                  reduce11方法
                </NavLink>
              </li>
              <li>
                <NavLink to={{ pathname: "/re/:22", state: { key: 22 } }} activeClassName={styles.active_route}>
                  reduce22方法
                </NavLink>
              </li>
              <li>
                <NavLink to={{ pathname: "/re/:33", state: { key: 33 } }} activeClassName={styles.active_route}>
                  reduce33方法
                </NavLink>
              </li>
              <li>
                <NavLink to={{ pathname: "/statics", state: { key: 33 } }} activeClassName={styles.active_route}>
                statics
                </NavLink>
              </li>
            </nav>

            <Switch>
              <Route path="/in">
                <Homes />
              </Route>
              <Route path="/so">
                <Sorts />
              </Route>
              <Route path="/re/:id">
                <Reduces that={this} />
              </Route>
              <StaticRouter location={"/statics"} context={context}>
                <Statics />
              </StaticRouter>
            </Switch>
          </div>
        </Router>
      </div>
    );
  }
}

function Homes() {
  return <h2>Homes</h2>;
}

function Sorts() {
  return <h2>Sorts</h2>;
}

function Reduces() {
  let { id } = useParams();
  return <h2>Reduces{id}</h2>;
}

function Statics() {
  return <h2>Statics</h2>;
}
